<template>
  <div class="container page">
    <div class="container header">
      <van-nav-bar
          title="兑换记录"
          left-arrow
          @click-left="$router.back()"
      />
    </div>
    <div class="main">
      <div class="van-pull-refresh refresh-box">
        <van-pull-refresh style="height: 100%; overflow-y: scroll" class="pull-refresh" v-model="refresh" success-text="刷新成功"
                          @refresh="onRefresh">
          <template #default>
            <van-list class="listcontainer" v-model="loading" :finished="((page - 1) * 20 + list.length) >= total" @load="onLoad" >
              <template #default>
                <div class="items" v-for="item in list" :key="item.id">
                  <div class="left">
                    <div class="title">兑现积分{{ item.total_money }}积分</div>
                    <span>{{ item.create_time }}</span></div>
                  <div class="mid" @click="$router.push({ name: 'WithdrawDetail', query:{ id: item.id } })">
                    <span>查看</span></div>
                  <div class="right" @click="$router.push({ name: 'WithdrawDetail', query:{ id: item.id } })"><span
                      class="PENDING">{{ item.status_text }}</span><i
                      class="van-badge__wrapper van-icon van-icon-arrow arrow" style="font-size: 14px;">
                  </i></div>
                </div>
                <div style="display: none" class="emptyView">
                  <img class="emptyViewimg" :src="require('../../assets/img/tip/kong.png')">
                  <p class="emptyViewText">暂无数据</p>
                </div>
              </template>
              <template #finished>
                没有更多了
              </template>
            </van-list>
          </template>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import {getWithdrawList} from "@api/Withdraw";

export default {
  name: "WithdrawRecord",
  data: function () {
    return {
      loading: false,
      finished: true,
      refresh: false,
      page: 1,
      total: 0,
      list: []
    }
  },
  created() {
    this.initWithdraw()
  },
  methods: {
    onLoad: function (){
      this.page++;
      getWithdrawList(this.page).then(v => {
        this.list = this.list.concat(v.data.data);
        this.page = v.data.current_page;
        this.total = v.data.total;
        this.refresh = false;
        this.loading = false;
        this.finished = true;
      })
    },
    onRefresh: function () {
      this.finished = false;
      this.initWithdraw();
    },
    initWithdraw: function () {
      getWithdrawList().then(v => {
        this.list = v.data.data;
        this.page = v.data.current_page;
        this.total = v.data.total;
        this.refresh = false;
        this.loading = false;
        this.finished = true;
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.container {
  display: flex;
  flex-direction: column;
  height: 4rem;
  background: linear-gradient(270deg, #fff, #fff)
}

.container {
  height: 100%;
  color: #000;
  font-size: .37333rem
}

.container .box .content span {
  font-size: .42667rem
}

.container .box .content .datetime div {
  border: .02667rem solid #f7f7f7;
  border-radius: .13333rem;
  font-size: .42667rem;
  width: 3.2rem;
  height: .93333rem;
  display: flex;
  justify-content: center;
  align-items: center
}

.container .box .content p {
  padding: .53333rem 0;
  font-size: .42667rem
}

.container .box .btns {
  padding-right: .53333rem;
  width: 100%;
  position: absolute;
  bottom: .53333rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

.container .box .btns button {
  height: 1.06667rem;
  width: 45%;
  border-radius: 1.06667rem;
  outline: 0;
  border: 0
}

.container .header {
  height: 1.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around
}

.container .main {
  display: flex;
  flex-direction: column;
  background-color: #fcf0fa;
  height: calc(100% - 1.1rem)
}

.container .main .refresh-box {
  height: 100%;
  overflow-y: auto !important
}

.container .main .refresh-box .items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: .02667rem solid #fa59b5;
  padding: .37333rem .26667rem;
  background-color: #f5dcf1
}

.container .main .refresh-box .items .left {
  width: 4rem
}

.container .main .refresh-box .items .left .title {
  color: #fa59b5;
  padding-bottom: .26667rem
}

.container .main .refresh-box .items .left span {
  font-size: .32rem;
  color: #979799
}

.container .main .refresh-box .items .right {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #979799
}

.container .main .refresh-box .items .right span {
  padding-right: .13333rem
}

.container .main .refresh-box .items .right .PENDING {
  color: #979799
}

</style>
